<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

	<head>
		<!--注册登录header-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="../../../common/css/register/frame_1.css" type="text/css" rel="stylesheet" />
		<link href="../../../common/css/register/register.css" type="text/css" rel="stylesheet" />

		<link rel="stylesheet" href="../../../common/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../../common/css/register/login.css">
		<script src="../../../common/js/jquery.min.js"></script>
		<script src="../../../common/bootstrap/js/bootstrap.min.js"></script>

		<script type="text/javascript">
			var $CONFIG = {};
			$CONFIG['lang'] = "zh-cn";
		</script>

		<!--/注册登录header-->
		<title>微博注册</title>
		<style>
			.but_spp {
				background-color: #FFA306;
				width: 160px;
				height: 35px;
			}
			
			.div_buttom {
				width: 100%;
				height: 300px;
			}
			
			form {
				border-style: none;
				height: 600px;
			}
			
			.div_form {
				padding-top: 50px;
			}
			
			a {
				text-decoration: none !important;
			}
			
			.error-border {
				color: red !important;
			}
			.sp-5{
			color: red;
			}
		</style>

		<script type="text/javascript">
			$(document).ready(function() {

				$("#regist_vcode").on("blur", function() {
                    
                     var yzm = $("#regist_vcode").val();
                    
					$.ajax({
						type: "POST",
						url: "/regiest/checkyzm?flag=check",
						data: {
							"telyzm": yzm
						},
						success: function(msg) {
							
							if(msg == "suc") {
								$(".sp-5").text("");	
								document.getElementById("regist_btn").removeAttribute("disabled");
							} else {

								$(".sp-5").text("验证码错误");							
							}

						}
					});

				})

				$("#regist_account").on("blur", function() {

					var $this = $(this);
					var username = $this.val();
					if(username.trim() == "") {
						$(".sp-1").text("昵称不能为空").addClass("error-border");
						return false;
					}
				})
				//判断密码是否合法
				$("#regist_password1").on("blur", function() {
					var $this = $(this);
					var pwd = $this.val();
					var checkpwd = /^[a-zA-Z0-9_]{6,18}$/;
					//	     		alert(pwd);
					if(pwd.trim() == "") {
						$(".sp-2").text("密码不能为空").addClass("error-border");
						return false;
					}
					if(!(checkpwd.test(pwd))) {
						$(".sp-2").text("请输入6-18位由字母数字组成的密码").addClass("error-border");
						return false;
					} else {
						$(".sp-2").text("").removeClass("error-border");
						return true;
					}
				})

				//判断第二次密码是否一致
				$("#regist_password2").on("blur", function() {
					
					var $this = $(this);
					var suerpwd = $this.val();
					var pwd = $("#regist_password1").val();

					if(suerpwd == pwd) {
						$(".sp-3").text("").removeClass("error-border");
						return true;
						//						return ;
					} else {
						$(".sp-3").text("请确保两次密码相同").addClass("error-border");
						return false;
					}
				})
				//                  检查手机号是否可用
				$("#tel").on("blur", function() {
					
					var $this = $(this);
					var tel = $this.val();

					var checktel = /^[1][3,4,5,7,8][0-9]{9}$/;
					if(checktel.test(tel)) {
						$(".sp-4").text("").removeClass("error-border");
						$.ajax({
							type: "POST",
							url: "/regiest/check?flag=check",
							data: {
								"tel": tel
							},
							success: function(msg) {
								if(msg == "suc") {
									$(".sp-4").text("").removeClass("error-border");
									
									document.getElementById("getVCode").removeAttribute("disabled");
								} else {
									$(".sp-4").text("账号已被注册").addClass("error-border");									
								}

							}
						});
						return true;

					} else if(tel == null) {
						$(".sp-4").text("请输入手机号").addClass("error-border");
						return false;
					} else {
						$(".sp-4").text("手机号非法").addClass("error-border");
						return false;
					}
				})

			})
		</script>

	</head>

	<body class="B_register B_reg_tel ">

		<div class="W_nologin">
			<div class="W_header_line"></div>
			<div class="W_reg_header W_logo_wave">
				<div class="W_nologin_logo_big"></div>
			</div>
			<div class="W_nologin_main main_radius_bg">

				<div class="div_reg">
					<form action="/regiest/insert" method="post">

						<div class="div_form" id='regist_container'>
							<div id="lab1">
								<span id="lab_login">微博注册</span>
								<span id="lab_toLogin">
						&emsp;已有账号&nbsp;
						<span id='toLogin' style="color: #EB9316;cursor: pointer;"><a href="/login/index">立即登录</a></span>
								</span>
							</div>
							<div id="form_container2" style="padding-top: 25px;">
								<div>
									<input type="text" class="form-control" name="userName" value="admin" placeholder="用户名" id="regist_account">
									<span class="sp-1"></span>
									<input type="password" class="form-control" name="userPassword" placeholder="请输入6-18位的密码" id="regist_password1">
									<span class="sp-2"></span>
									<input type="password" class="form-control" placeholder="请确认密码" id="regist_password2">
									<span class="sp-3"></span>
									<input type="text" class="form-control" name="userAccount" placeholder="手机号" id="tel">
									<span class="sp-4"></span>
								</div>
								<div>
									<input type="text" name="telyzm" class="form-control" placeholder="验证码" id="regist_vcode">
									<!--<button id="getVCode" type="button" class="btn btn-success" >获取验证码</button>-->
									<input id="getVCode" type="button" class="btn btn-success" disabled="true" value="点击发送验证码" onclick="sendCode(this)">
									<span class="sp-5"></span>
								</div>
								<div>
									<input type="submit" value="注册" class="btn btn-success" disabled="true" id="regist_btn">
								</div>
							</div>

						</div>
					</form>
				</div>

			</div>
			<div class="div_buttom">

			</div>

	</body>
	<script type="text/javascript">
		var clock = '';
		var nums = 30;
		var btn;

		function sendCode(thisBtn) {
			btn = thisBtn;
			btn.disabled = true; //将按钮置为不可点击
			btn.value = '重新获取（' + nums + '）';
			clock = setInterval(doLoop, 1000); //一秒执行一次
		}

		function doLoop() {
			nums--;
			var tel = $("#tel").val();
			if(nums == 29) {
				
				$.ajax({
					type: "POST",
					url: "/regiest/send?flag=yzm",
					data: {
						"tel": tel
					},

				});

			}
			if(nums > 0) {
				btn.value = '重新获取（' + nums + '）';
			} else {
				clearInterval(clock); //清除js定时器
				btn.disabled = false;
				btn.value = '点击发送验证码';
				nums = 30; //重置时间
			}
		}
	</script>

</html>